import React, { useState, useEffect } from 'react';
import './css/Partners.css';
import ChinaMap from './ChinaMap';

interface Partner {
  zhName: string;
  enName: string;
  region: string;
}

const Partners: React.FC = () => {
  const [language, setLanguage] = useState<'zh' | 'en'>('zh');

  const partners: Partner[] = [
    { zhName: '广汽研究院', enName: 'GAC R&D Center', region: '广东' },
    { zhName: '广汽丰田', enName: 'GAC Toyota', region: '广东' },
    { zhName: '小鹏汽车', enName: 'XPeng Motors', region: '广东' },
    { zhName: '东风岚图', enName: 'Dongfeng Voyah', region: '湖北' },
    { zhName: '马瑞利', enName: 'Marelli', region: '上海' },
    { zhName: '广汽埃安', enName: 'GAC Aion', region: '广东' },
    { zhName: '广汽能源', enName: 'GAC Energy', region: '广东' },
    { zhName: '联友科技', enName: 'Lianyou Technology', region: '广东' },
    { zhName: '江铃汽车', enName: 'JMC Motors', region: '江西' },
    { zhName: '星河智联', enName: 'Xinghe Zhilian', region: '广东' },
    { zhName: '优尼冲压', enName: 'Unipress', region: '广东' },
    { zhName: '高域科技', enName: 'Gaoyu Technology', region: '北京' },
  ];

  // 计算各地区客户数量和排序
  const regionStats = partners.reduce((acc, partner) => {
    const region = partner.region;
    acc[region] = (acc[region] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);

  // 获取最多客户的省份
  const topRegion = Object.entries(regionStats).sort((a, b) => b[1] - a[1])[0];
  const totalPartners = partners.length;

  // 将合作伙伴分成四行，每行六个
  const rows = [
    partners.slice(0, 6),
    partners.slice(6, 12),
    partners.slice(0, 6),
    partners.slice(6, 12),
  ];

  useEffect(() => {
    const storedLanguage = localStorage.getItem('language') as 'zh' | 'en' || 'zh';
    setLanguage(storedLanguage);
    
    const handleLanguageChange = () => {
      const newLanguage = localStorage.getItem('language') as 'zh' | 'en' || 'zh';
      setLanguage(newLanguage);
    };
    
    window.addEventListener('languageChange', handleLanguageChange);
    return () => window.removeEventListener('languageChange', handleLanguageChange);
  }, []);

  return (
    <div className="partners-container">
      
      <div className="partners-content">
        <div className="partners-left-column">
          {/* 客户来源统计区域 */}
          <div className="region-stats-container">
                <h2 className="partners-title">
                    {language === 'zh' ? '重点合作客户' : 'Key Partners'}
                </h2>
            <div className="region-stats-content">
              <div className="region-stat-item">
                <span className="region-stat-label">
                  {language === 'zh' ? '最多客户省份' : 'Top Region'}
                </span>
                <span className="region-stat-value">
                  {topRegion[0]} {topRegion[1]}{language === 'zh' ? '家' : ''}
                </span>
              </div>
              <div className="region-stat-item">
                <span className="region-stat-label">
                  {language === 'zh' ? '总客户数' : 'Total Partners'}
                </span>
                <span className="region-stat-value">
                  {totalPartners}{language === 'zh' ? '家' : ''}
                </span>
              </div>
            </div>
          </div>

          {/* 跑马灯区域 */}
          <div className="partners-flow-container">
            {rows.map((row, rowIndex) => (
              <div 
                key={rowIndex} 
                className={`marquee-row ${rowIndex % 2 === 1 ? 'even-row' : ''}`}
              >
                <div className="marquee-group">
                  {row.map((partner, index) => (
                    <div key={index} className="partner-item">
                      <span className="partner-name">
                        {language === 'zh' ? partner.zhName : partner.enName}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="marquee-group" aria-hidden="true">
                  {row.map((partner, index) => (
                    <div key={index} className="partner-item">
                      <span className="partner-name">
                        {language === 'zh' ? partner.zhName : partner.enName}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 地图区域 */}
        <div className="china-map-container">
          <ChinaMap regionData={regionStats} language={language} />
        </div>
      </div>
    </div>
  );
};

export default Partners;